<template>
  <Page name="手机号码归属地">
    <div class="area-page">
      <div class="group" v-for="(item,index) in list" :key="index">
        <p>{{item.shortName}}</p>
        <ul>
          <li v-for="country in item.countrylist" :key="country.name" class="fx fx-between fx-vc" @click="pick(country)">
            <span class="flex">{{country.name}}</span>
            <label>+{{country.code}}</label>
          </li>
        </ul>
      </div>
    </div>
  </Page>
</template>

<script>
/**
 * 手机区号选择组件
 */
import Page from '~/components/page';

export default {
  // 验证页面来源是否正确
  validate({params,query,app,redirect}){
    if(!params.from){
      if(query.from){
        app.router.replace({name:query.from})
      }else{
        redirect('/login')
      }
    }
    return true;
  },
  async asyncData({ store }){
    await store.dispatch('area_code/GET_AREA_CODE');
    return {list: store.getters['area_code/area_code_list']}
  },
  components:{
    Page,
  },
  methods: {
    pick(item){
      const { from,data } = this.$route.params;
      let opt = {name:from,params:{country:item,data}};
      if(this.$route.query) {
        delete this.$route.query.from;
        opt.query = this.$route.query;
      }
      this.$router.replace(opt);
    }
  }
}
</script>

<style lang="less" scoped>

  ul,p {
    padding:0 28px;
  }
  .group {
    p {
      position:sticky;
      top:@app-header-height;
      font-size:24px;
      color:#666;
      height:50px;
      line-height: 50px;
      background-color:#f6f6f6;
    }
  }

  p,
  li>span,
  li>label {
    display:block;
    .text-ellipsis();
  }

  ul {
    background-color:#fff;
  }
  li {
    height:98px;
    border-bottom:1px solid #edeef0;
    font-size:30px;
    span {
      color:#292929;
    }
    label {
      color:#999;
    }
  }
</style>


